<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>微信用户信息</title>
<script
	src="${ctx}/static/selectWin/appSelector.js?version=${applicationScope.jsVersion }"
	type="text/javascript"></script>
<script
	src="${ctx}/static/selectWin/groupsSelector.js?version=${applicationScope.jsVersion }"
	type="text/javascript"></script>
<script type="text/javascript">
	var $grid;
	var selectIndex;
	var selectIndex2 = -1;
	var editRow = true;
	$(function() {
		$grid = $("#grid").datagrid(
				$.extend(datagridOption, {
					//title : '微信用户信息',
					url : "${ctx}/wx/wxUser/dataGrid",
					onDblClickRow : function(rowIndex, rowData) {
						if (selectIndex2 != -1) {
							$(this).datagrid("endEdit", selectIndex2);
						}
						selectIndex2 = rowIndex;
						selectIndex = rowIndex;
						//给实体赋初值
						$grid.datagrid("updateRow", {
							index : rowIndex,
							row : {
								"appName" : rowData.app ? rowData.app.appName : null,
								"groupName" : rowData.groups ? rowData.groups.groupName : null
							}
						});
					},
					columns : [ [
							{
								field : 'ck',
								checkbox : true
							},
							{
								field : 'groupName',
								title : '所属组',
								sortable : true,
								width : 60,
								editor : {
									type : "comboselector",
									options : $.extend(groupsSelectOpts, {
										idField : "id",
										textField : "groupName",
										onEnter : function(val) {
											$("#grid").datagrid("endEdit", selectIndex);
											$("#grid").datagrid("updateRow", {
												index : selectIndex,
												row : {
													"groups" : val
												}
											});
										}
									})
								},
								formatter : function(val, row, index) {
									return row.groups ? row.groups.groupName : "";
								}
							},
							{
								field : 'appName',
								title : '所属公共账号',
								sortable : true,
								editor : {
									type : "comboselector",
									options : $.extend(appSelectOpts, {
										idField : "id",
										textField : "appName",
										onEnter : function(val) {
											$("#grid").datagrid("endEdit", selectIndex);
											$("#grid").datagrid("updateRow", {
												index : selectIndex,
												row : {
													"app" : val
												}
											});
										}
									})
								},
								formatter : function(val, row, index) {
									return row.app ? row.app.appName : "";
								}
							},
							{
								field : 'subscribe',
								title : '是否订阅',
								sortable : true,
								formatter : function(value, row, index) {
									return '<input class="easyui-switchbutton" ' + (value == 1 ? "checked" : "")
											+ ' data-options="readonly:true,onText:\'是\',offText:\'否\'">';
								}
							}, {
								field : 'openid',
								title : '标识',
								sortable : true,
								editor : {
									type : "validatebox",
									options : {
										required : true
									}
								}
							}, {
								field : 'nickname',
								title : '昵称',
								sortable : true,
								width : 80,
								editor : {
									type : "validatebox",
									options : {
										required : true
									}
								}
							}, {
								field : 'userSex',
								title : '性别',
								width : 40,
								sortable : true,
								editor : {
									type : "combobox",
									options : {
										required : true,
										editable : false,
										url : kl.ctx + '/pub/combobox/userSex',
										textField : "text",
										valueField : "value"
									}
								},
								formatter : function(value, row, index) {
									return value == 1 ? "男" : (value == 2 ? "女" : "未知");
								}
							}, {
								field : 'city',
								title : '所在城市',
								sortable : true,
								width : 70,
								editor : "text"
							}, {
								field : 'country',
								title : '所在国家',
								sortable : true,
								width : 70,
								editor : "text"
							}, {
								field : 'province',
								title : '所在省份',
								sortable : true,
								width : 50,
								editor : "text"
							}, {
								field : 'language',
								title : '用户语言',
								sortable : true,
								width : 60,
								editor : {
									type : "combobox",
									options : {
										required : true,
										editable : false,
										url : kl.ctx + '/pub/combobox/language',
										textField : "text",
										valueField : "value"
									}
								}
							}, {
								field : 'headimgurl',
								title : '用户头像Url',
								sortable : true,
								formatter : function(val) {
									if (val != null && val.length > 25) {
										return val.substr(0, 25) + "...";
									} else {
										return val;
									}
								},
								editor : {
									type : "combobox",
									options : {
										required : true,
										editable : false,
										url : kl.ctx + '/pub/combobox/imgUrl',
										textField : "text",
										valueField : "value"
									}
								}
							}, {
								field : 'subscribeTime',
								title : '用户关注时间',
								sortable : true,
								width : 100,
								editor : "datebox"
							}, {
								field : 'unionid',
								title : '绑定平台账号',
								sortable : true,
								editor : "text"
							}, {
								field : 'originGroupId',
								title : '分组ID',
								sortable : true,
								editor : "text"
							} ] ],
					onBeforeEdit : function(rowIndex, rowData, changes) {
						$.fn.datagrid.extensions.onAfterEdit.apply(this, arguments); //这句一定要加上
						$(this).datagrid("updateRow", {
							index : rowIndex,
							row : rowData
						});
						editRow = true;
					},
					onAfterEdit : function(rowIndex, rowData, changes) {
						$.fn.datagrid.extensions.onAfterEdit.apply(this, arguments); //这句一定要加上
						$(this).datagrid("updateRow", {
							index : rowIndex,
							row : rowData
						});
						editRow = true;
					},
					autoEditingEvent : "onDblClickRow",
					autoEditing : true, //该属性启用双击行时自定开启该行的编辑状态
					extEditing : true, //该属性启用行编辑状态的 ExtEditing 风格效果，该属性默认为 true。
					singleEditing : true
				}));

		$("#grid").datagrid('enableFilter', [ {
			field : 'appName',
			searchField : 'app.appName'
		}, {
			field : 'groupName',
			searchField : 'groups.groupName'
		}, {
			field : 'subscribe',
			javaType : 'N',
			op : [ 'EQ', 'NEQ', 'GT', 'LT', 'GTE', 'LTE', 'ISNULL', 'NOTNULL' ]
		}, {
			field : 'userSex',
			javaType : 'N',
			op : [ 'EQ', 'NEQ', 'GT', 'LT', 'GTE', 'LTE', 'ISNULL', 'NOTNULL' ]
		} ]);
		fn_initComboNotId("userSex", "userSex", true);//性别
		fn_initComboNotId("language", "language", true);//用户语言
		fn_initComboNotId("headimgurl", "imgUrl", true);//图像大小

		$("#subscrebeSB").switchbutton({
			onText : "是",
			offText : "否",
			checked : true,
			onChange : function(checked) {
				if (checked) {
					$("#subscribe").val(1);
				} else {
					$("#subscribe").val(2);
				}
			}
		});

		$("#groupsSelector").click(function() {
			$.easyui.showGridSelector($.extend(groupsSelectOpts, {
				multiple : false,
				singleSelect : true,
				onEnter : function(val) {
					var wxGroupId = val.id;
					var groupName = val.groupName;
					$("#wxGroupId").val(wxGroupId);
					$("#groupName").val(groupName);
				}
			}));
		});

		$("#appSelector").click(function() {
			$.easyui.showGridSelector($.extend(appSelectOpts, {
				multiple : false,
				singleSelect : true,
				onEnter : function(val) {
					var appId = val.id;
					var appName = val.appName;
					$("#appId").val(appId);
					$("#appName").val(appName);
				}
			}));
		});

		$("#add").click(function() {
			$("#fm").form("clear");
			$('#fm').form('load', {
				subscribe : 1
			});

			$("#subscrebeSB").switchbutton('check');
			$("#dlg").dialog("open").dialog("setTitle", "新增用户信息");
		});

		$("#edit").click(function() {
			var rowData = $grid.datagrid("getSelected");
			if (!rowData) {
				showInfo("您未选中行，无法编辑");
			} else {
				$("#dlg").dialog("open").dialog("setTitle", "编辑微信用户信息");
				$("#fm").form("clear");
				$("#fm").form("load", rowData);
				$("#subscrebeSB").switchbutton(rowData.subscribe == 1 ? "check" : "uncheck");
				if (rowData.groups) {
					$("#wxGroupId").val(rowData.groups.id);
					$("#groupName").val(rowData.groups.groupName);
				}
				if (rowData.app) {
					$("#appId").val(rowData.app.id);
					$("#appName").val(rowData.app.appName);
				}
			}
		});
		$("#delete").click(function() {
			multiDeleteDataGrid($grid, "${ctx}/wx/wxUser/multiDelete");
		});
		$("#search").click(function() {
			$grid.datagrid('load', $("#tt").form("getData"));
		});
		$("#excelExport").click(function() {
			var url = "${ctx}/wx/wxUser/excelExport?" + $.param($grid.datagrid('options').queryParams);
			if ($grid.datagrid("options").filterRules) {
				url += "&filterRules=" + JSON.stringify($grid.datagrid("options").filterRules);
			}
			window.parent.location.href = url;
		});
	});
</script>
</head>

<body>
	<div data-options="region:'center',fit:true,border:false">
		<table id="grid">
		</table>
	</div>
	<div id="tt" class="row">
		<div class="col-md-4">
			<form class="form-grid-search form-inline">
				<div class="form-group">
					<input type="text" class="form-control" name="search_LIKE_nickname"
						placeholder="用户名称" />
				</div>
				<button type="button" id="search" class="btn btn-primary">
					<span class="glyphicon glyphicon-search"></span> 查询
				</button>
			</form>
		</div>
		<div class="col-md-8">
			<shiro:hasPermission name="wxUser:update">
				<button id="add" type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-plus"></span> 新增
				</button>
				<button id="edit" type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-pencil"></span> 编辑
				</button>
			</shiro:hasPermission>
			<shiro:hasPermission name="wxUser:delete">
				<button id="delete" type="button" class="btn btn-danger">
					<span class="glyphicon glyphicon-minus"></span> 删除
				</button>
			</shiro:hasPermission>
			<shiro:hasPermission name="wxUser:export">
				<button id="excelExport" type="button" class="btn btn-primary">
					<span class="glyphicon glyphicon-save"></span> Excel导出
				</button>
			</shiro:hasPermission>
		</div>
	</div>
	<shiro:hasPermission name="wxUser:update">
		<div id="dlg" class="easyui-dialog"
			style="width: 710px; height: 400px; padding: 10px 20px"
			data-options="resizable:true,modal:true, buttons:'#dlg-btn',closed:true">
			<form id="fm" method="post">
				<input type="hidden" name="id" />
				<table id="tbl">
					<tr>
						<td><label>所属组:</label></td>
						<td><input id="wxGroupId" name="groups" type="hidden"><input
							id="groupName" class="easyui-validatebox"
							data-options="required: true" readonly="readonly" /><a
							id="groupsSelector" class="easyui-linkbutton easyui-tooltip"
							data-options="plain: true, iconCls: 'icon-metro-search',content:'选取分组'"></a></td>
						<td><label>所属公共账号:</label></td>
						<td><input id="appId" name="app" type="hidden"><input
							id="appName" class="easyui-validatebox"
							data-options="required: true" readonly="readonly" /><a
							id="appSelector" class="easyui-linkbutton easyui-tooltip"
							data-options="plain: true, iconCls: 'icon-metro-search',content:'选取公共账号'"></a></td>
					</tr>
					<tr>
						<td><label>用户标识:</label></td>
						<td><input name="openid" class="easyui-validatebox"
							data-options="required: true"></td>
						<td><label>是否订阅:</label></td>
						<td><input id="subscribe" name="subscribe" type="hidden">
							<input id="subscrebeSB"></td>
					</tr>
					<tr>
						<td><label>用户昵称:</label></td>
						<td><input name="nickname" class="easyui-validatebox"
							data-options="required: true"></td>
						<td><label>用户性别:</label></td>
						<td><input id="userSex" name="userSex"></td>
					</tr>
					<tr>
						<td><label>用户所在城市:</label></td>
						<td><input name="city" class="easyui-validatebox"></td>
						<td><label>用户所在国家:</label></td>
						<td><input name="country" class="easyui-validatebox"></td>
					</tr>
					<tr>
						<td><label>用户所在省份:</label></td>
						<td><input name="province" class="easyui-validatebox"></td>
						<td><label>用户语言:</label></td>
						<td><input id="language" name="language"></td>
					</tr>
					<tr>
						<td><label>用户头像Url:</label></td>
						<td><input id="headimgurl" name="headimgurl"></td>
						<td><label>用户关注时间:</label></td>
						<td><input name="subscribeTime" class="easyui-datebox"></td>
					</tr>
					<tr>
						<td><label>绑定平台账号:</label></td>
						<td><input name="unionid" class="easyui-validatebox"></td>
						<td><label>分组ID:</label></td>
						<td><input name="originGroupId" class="easyui-validatebox"></td>
					</tr>
				</table>
			</form>
			<div id="dlg-btn">
				<button id="save" type="button" class="btn btn-primary"
					onclick="formSave('#fm', '#grid', '#dlg', '${ctx}/wx/wxUser/update');">
					<span class="glyphicon glyphicon-ok"></span> 保存
				</button>
				<button id="close" type="button" class="btn btn-primary"
					onclick="$('#dlg').dialog('close');">
					<span class="glyphicon glyphicon-remove"></span> 取消
				</button>
			</div>
		</div>
	</shiro:hasPermission>
</body>
</html>
